<template>
  <div class="container">
    <a-card class="card card1" :bordered="false" title="基础设置" >
      <a-input class="input" v-model="url" placeholder="直播间地址"/>
      <a-input class="input" v-model="genxingTime" placeholder="更新间隔"/>
      <m-textline :values="bduss" title="百度BDUSS账号" @change="changeTextLine" />
      <a-button v-if="!isSet" type="primary" @click="login" :loading="setLoading">设置</a-button>
      <a-button v-else type="danger" @click="goExit" :loading="exitLoading">退出</a-button>
    </a-card>
    <a-card class="card card1" :bordered="false" title="发送弹幕" >
      <m-textline :values="danmu" title="发送弹幕" @change="changeDanmuLine" />
      <a-button type="primary" @click="sendDanmu" :loading="danmuLoading">{{danmuLoading?'持续发送中':'发送弹幕'}}</a-button>
    </a-card>
  </div>
</template>

<script>
import { loginBaidu,sendDanmu,exit } from '@/api/zhibo/baidu'
export default {
  name:'shuijunBaidu',
  data() {
    return {
      url:'',
      bduss:[],
      danmu:[],
      genxingTime:10,
      setLoading:false,
      exitLoading:false,
      isSet:false,
      danmuLoading:false,
    }
  },
  methods:{
    sendDanmu(){
      this.danmuLoading = true
      let params = {
        danmu:this.danmu,
      }
      sendDanmu(params).then((res) => {
        console.log(res)
      });
    },
    login(){
      this.setLoading = true
      let params = {
        url:this.url,
        bduss:this.bduss,
        genxingTime:this.genxingTime
      }
      loginBaidu(params).then((res) => {
        console.log(res)
        this.setLoading = false
        if(res.errcode == 200){
          this.isSet = true
        }
      }).catch(()=>{
        this.setLoading = false
      });
    },
    goExit(){
      this.exitLoading = true
      exit().then((res)=>{
        console.log(res)
        this.exitLoading = false
        if(res.errcode == 200){
          this.isSet = false
          this.danmuLoading = false
        }
      })
    },
    changeDanmuLine(val){
      this.danmu = val
    },
    changeTextLine(val){
      this.bduss = val
    },
  }
}
</script>

<style lang="less" scoped>
  .container{
    .input{
      margin-bottom: 20px;
    }
    .card{
      margin-bottom: 20px;
      &:last-of-type{
        margin-bottom: 0;
      }
    }
  }
</style>